{% extends 'base.html' %}

{% block title %}推送项目配置 - 资讯聚合平台{% endblock %}

{% block page_title %}推送项目配置{% endblock %}

{% block page_actions %}
<div class="action-buttons">
    <button class="btn" id="add-email-btn">
        <i class="fas fa-envelope"></i> 添加邮箱
    </button>
    <button class="btn" id="add-dingtalk-btn">
        <i class="fas fa-comment-dots"></i> 添加钉钉
    </button>
    <button class="btn" id="add-feishu-btn">
        <i class="fas fa-paper-plane"></i> 添加飞书
    </button>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 选项卡切换
        const tabItems = document.querySelectorAll('.tab-item');
        const tabPanes = document.querySelectorAll('.tab-pane');
        
        tabItems.forEach(item => {
            item.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 移除所有选项卡的活动状态
                tabItems.forEach(tab => tab.classList.remove('active'));
                tabPanes.forEach(pane => pane.classList.remove('active'));
                
                // 设置当前选项卡为活动状态
                this.classList.add('active');
                document.getElementById(`${tabId}-tab`).classList.add('active');
            });
        });
        
        // 模态框相关
        const emailModal = document.getElementById('email-modal');
        const dingtalkModal = document.getElementById('dingtalk-modal');
        const feishuModal = document.getElementById('feishu-modal');
        const deleteModal = document.getElementById('delete-modal');
        
        const addEmailBtn = document.getElementById('add-email-btn');
        const addDingtalkBtn = document.getElementById('add-dingtalk-btn');
        const addFeishuBtn = document.getElementById('add-feishu-btn');
        
        const closeBtns = document.querySelectorAll('.close-btn');
        const cancelBtns = document.querySelectorAll('.btn-cancel');
        const deleteBtn = document.querySelector('.btn-delete');
        
        const editBtns = document.querySelectorAll('.edit-btn');
        const deleteBtns = document.querySelectorAll('.delete-btn');
        const testBtns = document.querySelectorAll('.test-btn');
        
        let currentDeleteType = null;
        let currentDeleteId = null;
        
        // 打开添加邮箱配置模态框
        addEmailBtn.addEventListener('click', function() {
            document.getElementById('email-modal-title').textContent = '添加邮箱配置';
            document.getElementById('email_config_id').value = '';
            document.getElementById('email-form').reset();
            document.getElementById('email_is_active').checked = true;
            emailModal.style.display = 'flex';
        });
        
        // 打开添加钉钉配置模态框
        addDingtalkBtn.addEventListener('click', function() {
            document.getElementById('dingtalk-modal-title').textContent = '添加钉钉配置';
            document.getElementById('dingtalk_config_id').value = '';
            document.getElementById('dingtalk-form').reset();
            document.getElementById('dingtalk_is_active').checked = true;
            dingtalkModal.style.display = 'flex';
        });
        
        // 打开添加飞书配置模态框
        addFeishuBtn.addEventListener('click', function() {
            document.getElementById('feishu-modal-title').textContent = '添加飞书配置';
            document.getElementById('feishu_config_id').value = '';
            document.getElementById('feishu-form').reset();
            document.getElementById('feishu_is_active').checked = true;
            feishuModal.style.display = 'flex';
        });
        
        // 关闭模态框
        closeBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                emailModal.style.display = 'none';
                dingtalkModal.style.display = 'none';
                feishuModal.style.display = 'none';
                deleteModal.style.display = 'none';
            });
        });
        
        cancelBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                emailModal.style.display = 'none';
                dingtalkModal.style.display = 'none';
                feishuModal.style.display = 'none';
                deleteModal.style.display = 'none';
            });
        });
        
        // 点击编辑按钮
        editBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const configType = this.getAttribute('data-type');
                const configId = this.getAttribute('data-id');
                
                if (configType === 'email') {
                    document.getElementById('email-modal-title').textContent = '编辑邮箱配置';
                    document.getElementById('email_config_id').value = configId;
                    // 这里应该发送AJAX请求获取配置详情，然后填充表单
                    // 为了演示，我们假设已经获取到数据
                    emailModal.style.display = 'flex';
                } else if (configType === 'dingtalk') {
                    document.getElementById('dingtalk-modal-title').textContent = '编辑钉钉配置';
                    document.getElementById('dingtalk_config_id').value = configId;
                    dingtalkModal.style.display = 'flex';
                } else if (configType === 'feishu') {
                    document.getElementById('feishu-modal-title').textContent = '编辑飞书配置';
                    document.getElementById('feishu_config_id').value = configId;
                    feishuModal.style.display = 'flex';
                }
            });
        });
        
        // 点击删除按钮
        deleteBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                currentDeleteType = this.getAttribute('data-type');
                currentDeleteId = this.getAttribute('data-id');
                deleteModal.style.display = 'flex';
            });
        });
        
        // 确认删除
        deleteBtn.addEventListener('click', function() {
            if (currentDeleteType && currentDeleteId) {
                // 发送删除请求
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/push_notifications/${currentDeleteType}_config/${currentDeleteId}/delete/`;
                
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = 'csrfmiddlewaretoken';
                csrfInput.value = document.querySelector('[name=csrfmiddlewaretoken]').value;
                
                form.appendChild(csrfInput);
                document.body.appendChild(form);
                form.submit();
            }
        });
        
        // 测试按钮点击事件
        testBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const configType = this.getAttribute('data-type');
                const configId = this.getAttribute('data-id');
                const testResultDiv = document.getElementById(`${configType}-test-result-${configId}`);
                const statusSpan = testResultDiv.querySelector('.test-status');
                const messageDiv = testResultDiv.querySelector('.test-message');
                
                // 显示加载状态
                testResultDiv.style.display = 'block';
                statusSpan.textContent = '测试中...';
                statusSpan.className = 'value test-status';
                messageDiv.textContent = '';
                
                // 发送测试请求
                fetch(`/push_notifications/${configType}_config/${configId}/test/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        statusSpan.textContent = '测试成功';
                        statusSpan.classList.add('success');
                        messageDiv.textContent = data.message || '连接成功';
                        
                        // 添加动画效果
                        testResultDiv.animate([
                            { backgroundColor: 'rgba(46, 204, 113, 0.3)' },
                            { backgroundColor: 'rgba(255, 255, 255, 0.5)' }
                        ], {
                            duration: 1500,
                            easing: 'ease-out'
                        });
                    } else {
                        statusSpan.textContent = '测试失败';
                        statusSpan.classList.add('error');
                        messageDiv.textContent = data.message || '连接失败';
                        
                        // 添加动画效果
                        testResultDiv.animate([
                            { backgroundColor: 'rgba(231, 76, 60, 0.3)' },
                            { backgroundColor: 'rgba(255, 255, 255, 0.5)' }
                        ], {
                            duration: 1500,
                            easing: 'ease-out'
                        });
                    }
                })
                .catch(error => {
                    statusSpan.textContent = '测试失败';
                    statusSpan.classList.add('error');
                    messageDiv.textContent = '请求出错，请稍后再试';
                    console.error('Error testing config:', error);
                });
            });
        });
        
        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === emailModal) {
                emailModal.style.display = 'none';
            }
            if (event.target === dingtalkModal) {
                dingtalkModal.style.display = 'none';
            }
            if (event.target === feishuModal) {
                feishuModal.style.display = 'none';
            }
            if (event.target === deleteModal) {
                deleteModal.style.display = 'none';
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="tabs">
    <div class="tab-header">
        <div class="tab-item active" data-tab="email">
            <i class="fas fa-envelope"></i> 邮箱推送列表
        </div>
        <div class="tab-item" data-tab="dingtalk">
            <i class="fas fa-comment-dots"></i> 钉钉推送列表
        </div>
        <div class="tab-item" data-tab="feishu">
            <i class="fas fa-paper-plane"></i> 飞书推送列表
        </div>
    </div>
    
    <div class="tab-content">
        <!-- 邮箱配置列表 -->
        <div class="tab-pane active" id="email-tab">
            {% if email_configs %}
                <div class="config-cards">
                    {% for config in email_configs %}
                        <div class="config-card">
                            <div class="config-header">
                                <h3>{{ config.name }}</h3>
                                <div class="config-actions">
                                    <button class="test-btn" data-type="email" data-id="{{ config.id }}" title="测试连接">
                                        <i class="fas fa-vial"></i>
                                    </button>
                                    <button class="edit-btn" data-type="email" data-id="{{ config.id }}" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="delete-btn" data-type="email" data-id="{{ config.id }}" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="config-body">
                                <div class="config-item">
                                    <span class="label">邮箱地址:</span>
                                    <span class="value">{{ config.email_address }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">SMTP服务器:</span>
                                    <span class="value">{{ config.smtp_server }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">SMTP端口:</span>
                                    <span class="value">{{ config.smtp_port }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">使用SSL:</span>
                                    <span class="value">{{ config.use_ssl|yesno:"是,否" }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">状态:</span>
                                    <span class="value status-badge {% if config.is_active %}active{% else %}inactive{% endif %}">
                                        {% if config.is_active %}启用{% else %}禁用{% endif %}
                                    </span>
                                </div>
                                <div class="config-item">
                                    <span class="label">更新时间:</span>
                                    <span class="value">{{ config.updated_at|date:"Y-m-d H:i" }}</span>
                                </div>
                                <div class="config-item test-result" id="email-test-result-{{ config.id }}" style="display: none;">
                                    <span class="label">测试结果:</span>
                                    <span class="value test-status"></span>
                                    <div class="test-message"></div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="empty-state">
                    <i class="fas fa-envelope fa-3x"></i>
                    <p>暂无邮箱配置</p>
                    <p class="hint">点击右上角"添加邮箱"按钮创建新配置</p>
                </div>
            {% endif %}
        </div>
        
        <!-- 钉钉配置列表 -->
        <div class="tab-pane" id="dingtalk-tab">
            {% if dingtalk_configs %}
                <div class="config-cards">
                    {% for config in dingtalk_configs %}
                        <div class="config-card">
                            <div class="config-header">
                                <h3>{{ config.name }}</h3>
                                <div class="config-actions">
                                    <button class="test-btn" data-type="dingtalk" data-id="{{ config.id }}" title="测试连接">
                                        <i class="fas fa-vial"></i>
                                    </button>
                                    <button class="edit-btn" data-type="dingtalk" data-id="{{ config.id }}" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="delete-btn" data-type="dingtalk" data-id="{{ config.id }}" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="config-body">
                                <div class="config-item">
                                    <span class="label">Webhook URL:</span>
                                    <span class="value">{{ config.webhook_url|truncatechars:30 }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">密钥:</span>
                                    <span class="value">{{ config.secret|default:"未设置"|truncatechars:20 }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">状态:</span>
                                    <span class="value status-badge {% if config.is_active %}active{% else %}inactive{% endif %}">
                                        {% if config.is_active %}启用{% else %}禁用{% endif %}
                                    </span>
                                </div>
                                <div class="config-item">
                                    <span class="label">更新时间:</span>
                                    <span class="value">{{ config.updated_at|date:"Y-m-d H:i" }}</span>
                                </div>
                                <div class="config-item test-result" id="dingtalk-test-result-{{ config.id }}" style="display: none;">
                                    <span class="label">测试结果:</span>
                                    <span class="value test-status"></span>
                                    <div class="test-message"></div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="empty-state">
                    <i class="fas fa-comment-dots fa-3x"></i>
                    <p>暂无钉钉配置</p>
                    <p class="hint">点击右上角"添加钉钉"按钮创建新配置</p>
                </div>
            {% endif %}
        </div>
        
        <!-- 飞书配置列表 -->
        <div class="tab-pane" id="feishu-tab">
            {% if feishu_configs %}
                <div class="config-cards">
                    {% for config in feishu_configs %}
                        <div class="config-card">
                            <div class="config-header">
                                <h3>{{ config.name }}</h3>
                                <div class="config-actions">
                                    <button class="test-btn" data-type="feishu" data-id="{{ config.id }}" title="测试连接">
                                        <i class="fas fa-vial"></i>
                                    </button>
                                    <button class="edit-btn" data-type="feishu" data-id="{{ config.id }}" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="delete-btn" data-type="feishu" data-id="{{ config.id }}" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="config-body">
                                <div class="config-item">
                                    <span class="label">App ID:</span>
                                    <span class="value">{{ config.app_id }}</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">App Secret:</span>
                                    <span class="value">••••••••</span>
                                </div>
                                <div class="config-item">
                                    <span class="label">状态:</span>
                                    <span class="value status-badge {% if config.is_active %}active{% else %}inactive{% endif %}">
                                        {% if config.is_active %}启用{% else %}禁用{% endif %}
                                    </span>
                                </div>
                                <div class="config-item">
                                    <span class="label">更新时间:</span>
                                    <span class="value">{{ config.updated_at|date:"Y-m-d H:i" }}</span>
                                </div>
                                <div class="config-item test-result" id="feishu-test-result-{{ config.id }}" style="display: none;">
                                    <span class="label">测试结果:</span>
                                    <span class="value test-status"></span>
                                    <div class="test-message"></div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="empty-state">
                    <i class="fas fa-paper-plane fa-3x"></i>
                    <p>暂无飞书配置</p>
                    <p class="hint">点击右上角"添加飞书"按钮创建新配置</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 邮箱配置模态框 -->
<div class="modal" id="email-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="email-modal-title">添加邮箱配置</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="email-form" method="post" action="{% url 'email_config_create' %}">
                {% csrf_token %}
                <input type="hidden" name="config_id" id="email_config_id">
                <div class="form-group">
                    <label for="email_name">配置名称</label>
                    <input type="text" id="email_name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email_address">邮箱地址</label>
                    <input type="email" id="email_address" name="email_address" required>
                </div>
                <div class="form-group">
                    <label for="smtp_server">SMTP服务器</label>
                    <input type="text" id="smtp_server" name="smtp_server" required>
                </div>
                <div class="form-group">
                    <label for="smtp_port">SMTP端口</label>
                    <input type="number" id="smtp_port" name="smtp_port" required>
                </div>
                <div class="form-group">
                    <label for="smtp_username">SMTP用户名</label>
                    <input type="text" id="smtp_username" name="smtp_username" required>
                </div>
                <div class="form-group">
                    <label for="smtp_password">SMTP密码</label>
                    <input type="password" id="smtp_password" name="smtp_password" required>
                </div>
                <div class="form-group checkbox">
                    <input type="checkbox" id="use_ssl" name="use_ssl" checked>
                    <label for="use_ssl">使用SSL</label>
                </div>
                <div class="form-group checkbox">
                    <input type="checkbox" id="email_is_active" name="is_active" checked>
                    <label for="email_is_active">启用此配置</label>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 钉钉配置模态框 -->
<div class="modal" id="dingtalk-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="dingtalk-modal-title">添加钉钉配置</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="dingtalk-form" method="post" action="{% url 'dingtalk_config_create' %}">
                {% csrf_token %}
                <input type="hidden" name="config_id" id="dingtalk_config_id">
                <div class="form-group">
                    <label for="dingtalk_name">配置名称</label>
                    <input type="text" id="dingtalk_name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="webhook_url">Webhook URL</label>
                    <input type="url" id="webhook_url" name="webhook_url" required>
                </div>
                <div class="form-group">
                    <label for="secret">密钥 (可选)</label>
                    <input type="text" id="secret" name="secret">
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" id="dingtalk_is_active" name="is_active" class="form-check-input">
                    <label class="form-check-label" for="dingtalk_is_active">启用此配置</label>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 飞书配置模态框 -->
<div class="modal" id="feishu-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="feishu-modal-title">添加飞书配置</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="feishu-form" method="post" action="{% url 'feishu_config_create' %}">
                {% csrf_token %}
                <input type="hidden" name="config_id" id="feishu_config_id">
                <div class="form-group">
                    <label for="feishu_name">配置名称</label>
                    <input type="text" id="feishu_name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="app_id">App ID</label>
                    <input type="text" id="app_id" name="app_id" required>
                </div>
                <div class="form-group">
                    <label for="app_secret">App Secret</label>
                    <input type="password" id="app_secret" name="app_secret" required>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" id="feishu_is_active" name="is_active" class="form-check-input">
                    <label class="form-check-label" for="feishu_is_active">启用此配置</label>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal" id="delete-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>确认删除</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <p>确定要删除此配置吗？此操作不可撤销。</p>
            <div class="form-actions">
                <button type="button" class="btn-cancel">取消</button>
                <button type="button" class="btn-delete">删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .action-buttons {
        display: flex;
        gap: 10px;
    }
    
    .tabs {
        margin-top: 20px;
    }
    
    .tab-header {
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    
    .tab-item {
        padding: 15px 20px;
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: 3px solid transparent;
        color: #7a938b;
        font-weight: 500;
        display: flex;
        align-items: center;
    }
    
    .tab-item i {
        margin-right: 8px;
    }
    
    .tab-item.active {
        color: var(--primary-green);
        border-bottom-color: var(--primary-green);
    }
    
    .tab-pane {
        display: none;
    }
    
    .tab-pane.active {
        display: block;
        animation: fade-in 0.3s ease-out;
    }
    
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    .config-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .config-card {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .config-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .config-header {
        background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
        color: white;
        padding: 18px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
    
    .config-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
        clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    }
    
    .config-header h3 {
        margin: 0;
        font-size: 1.2em;
    }
    
    .config-actions {
        display: flex;
        gap: 10px;
    }
    
    .config-actions {
        display: flex;
        gap: 12px;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    
    .config-actions button {
        background: rgba(255, 255, 255, 0.25);
        border: none;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .config-actions button:hover {
        background: rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    .config-body {
        padding: 15px;
    }
    
    .config-item {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
    }
    
    .config-item .label {
        font-size: 0.9em;
        color: #7a938b;
        margin-bottom: 5px;
    }
    
    .config-item .value {
        font-weight: 500;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 0;
        color: #7a938b;
    }
    
    .empty-state i {
        margin-bottom: 20px;
        opacity: 0.5;
    }
    
    .empty-state .hint {
        font-size: 0.9em;
        opacity: 0.7;
        margin-top: 10px;
    }
    
    /* 模态框样式 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    
    /* 测试结果样式 */
    .test-result {
        margin-top: 10px;
        padding: 10px;
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
    }
    
    .test-result .test-status {
        font-weight: 600;
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.85em;
    }
    
    .test-result .test-status.success {
        background-color: rgba(46, 204, 113, 0.2);
        color: #27ae60;
    }
    
    .test-result .test-status.error {
        background-color: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
    }
    
    .test-result .test-message {
        margin-top: 8px;
        font-size: 0.9em;
        color: #7a938b;
        word-break: break-word;
    }
    
    .status-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.85em;
        font-weight: 600;
    }
    
    .status-badge.active {
        background-color: rgba(46, 204, 113, 0.2);
        color: #27ae60;
    }
    
    .status-badge.inactive {
        background-color: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
    }
    
    .modal-content {
        background: rgba(255, 255, 255, 0.7);
        border-radius: 25px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        animation: modal-in 0.3s ease-out;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    
    @keyframes modal-in {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .modal-header h3 {
        margin: 0;
        color: var(--dark-gray);
    }
    
    .close-btn {
        background: none;
        border: none;
        font-size: 1.5em;
        cursor: pointer;
        color: #7a938b;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: var(--dark-gray);
        font-weight: 500;
    }
    
    .form-group input {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 1em;
        transition: border-color 0.3s;
    }
    
    .form-group input:focus {
        border-color: var(--primary-green);
        outline: none;
    }
    
    .form-group.checkbox {
        display: flex;
        align-items: center;
    }
    
    .form-group.checkbox input {
        width: auto;
        margin-right: 10px;
    }
    
    .form-group.checkbox label {
        margin-bottom: 0;
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
    
    .btn-cancel {
        background: #f1f1f1;
        color: var(--dark-gray);
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.3s;
    }
    
    .btn-cancel:hover {
        background: #e5e5e5;
    }
    
    .btn-submit {
        background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
        color: white;
        border: none;
        padding: 12px 28px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(126, 211, 33, 0.3);
        font-size: 1em;
        position: relative;
        overflow: hidden;
    }
    
    .btn-submit::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
        clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    }
    
    .btn-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(126, 211, 33, 0.4);
    }
    
    .btn-submit:active {
        transform: translateY(-1px);
    }
    
    .btn-delete {
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
        color: white;
        border: none;
        padding: 12px 28px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        font-size: 1em;
        position: relative;
        overflow: hidden;
    }
    
    .btn-delete::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
        clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    }
    
    .btn-delete:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    }
</style>
{% endblock %}
